<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="900px" :title="getTitle" @ok="handleSubmit" @close="handleCancel">
    <section class="card-list" v-show="isShowType">
      <section class="card" v-for="(item, index) in authType" :key="index">
        <div class="card-head">
          <img :src="item.img" class="card-image" />
          <div class="btns">
            <a-button type="primary" class="common-btn" @click="handleAdd({ subType: item.type })">新增</a-button>
          </div>
        </div>
        <p class="card-name">{{ item.name }}</p>
        <p class="card-row">
          <span class="value">{{ item.desc }}</span>
        </p>
      </section>
    </section>

    <BasicForm @register="registerForm" class="menuForm" v-show="!isShowType">
      <template #request="{}">
        <a-input value="POST" readonly style="border: none" />
      </template>
      <template #fixedAuth="{}">
        <a-form ref="formRef" :model="subInfos">
          <a-space v-for="(sight, index) in subInfos" :key="sight.id" class="addCol" align="baseline">
            <a-form-item :name="['sights', index, 'topic']">
              <a-input v-model:value="sight.topic" placeholder="请输入主题" />
            </a-form-item>
            <a-form-item :name="['sights', index, 'qos']">
              <a-select style="width: 170px" placeholder="请选择服务等级" v-model:value="sight.qos">
                <a-select-option value="0">0</a-select-option>
                <a-select-option value="1">1</a-select-option>
                <a-select-option value="2">2</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <MinusCircleOutlined @click="removeSight(sight)" v-show="showFooter" />
            </a-form-item>
          </a-space>
          <a-form-item>
            <a-button type="dashed" style="width: 350px" @click="addSight" :disabled="!showFooter">
              <PlusOutlined />
              添加订阅
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </BasicForm>

    <template #footer>
      <a-button type="primary" @click="handlePrev" v-show="!isShowType && !isUpdate">上一步</a-button>
      <a-button @click="handleSubmit(false)" type="primary" v-show="!isShowType">保存</a-button>
      <a-button @click="handleCancel(true)">取消</a-button>
    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, computed, unref, toRaw } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { formSchema, authType } from './proxy.data';
  // import { saveOrUpdate } from './proxy/api';
  const subInfos = ref([
    {
      topic: '',
      qos: '',
    },
  ]);
  const isUpdate = ref(true);
  const isShowType = ref(true);
  const emit = defineEmits(['success', 'register']);
  const [registerForm, { resetFields, validate, setFieldsValue, setProps }] = useForm({
    labelCol: {
      md: { span: 3 },
      sm: { span: 6 },
    },
    wrapperCol: {
      md: { span: 20 },
      sm: { span: 18 },
    },
    schemas: formSchema,
    showActionButtonGroup: false,
  });
  const showFooter = ref(true);
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    resetFields();
    isUpdate.value = !!data?.isUpdate;
    showFooter.value = !!data?.showFooter;
    setDrawerProps({ confirmLoading: false, showFooter: data?.showFooter ?? true });
    if (unref(isUpdate)) {
      isShowType.value = false;
      if (data.record.subType == 'TEXT') {
        subInfos.value = data.record.subInfos;
      }
      setFieldsValue({
        ...data.record,
      });
    }
    setProps({ disabled: !data?.showFooter });
  });
  //获取弹窗标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增代理订阅' : '编辑代理订阅'));

  function removeSight(item) {
    let index = subInfos.value.indexOf(item);
    if (index !== -1) {
      subInfos.value.splice(index, 1);
    }
  }
  function addSight() {
    subInfos.value.push({
      topic: '',
      qos: '',
    });
  }

  function handleAdd(type) {
    isShowType.value = false;
    setFieldsValue({
      ...type,
    });
  }
  function handlePrev() {
    isShowType.value = true;
    resetFields();
  }
  function handleCancel() {
    isShowType.value = true;
    subInfos.value = [];
    closeDrawer();
  }
  //提交事件
  async function handleSubmit() {
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      //提交表单
      if (values.subType == 'TEXT') {
        values.fixedAuthConfig = toRaw(subInfos.value);
      }
      console.log(values);
      // await saveOrUpdate(values, isUpdate.value);
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>
<style scoped>
  .card-list {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .card-list .card {
    width: 0;
    flex: 0 0 390px;
    height: 170px;
    background: #f5f8fa;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    margin: 0 16px 16px 0;
  }
  .card-list .card .card-head {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 16px;
    font-weight: 700;
  }
  .card-list .card .card-head .card-image {
    width: 0;
    height: 54px;
    flex: 0 0 56px;
    border-radius: 4px;
    object-fit: scale-down;
  }
  .card-list .card .card-head .btns {
    flex: 0 0 110px;
    width: 0;
    text-align: right;
    padding-top: 12px;
  }
  .common-btn {
    border-radius: 18px;
    margin-right: 16px;
  }
  .common-btn .btn-left-img {
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin-right: 5px;
  }
  .card-list .card .card-name {
    font-size: 15px;
    font-weight: 600;
    color: #0b1e42;
    line-height: 22px;
    margin-top: 9px;
  }
  .card-list .card .card-row {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #788aa0;
    line-height: 18px;
  }
  .addCol {
    display: flex;
    margin-bottom: 8px;
  }
</style>
